<template>
	<view class="state Han">
		<view class="state_head devideLine">
			<view class="cancel md4Text" @click="deleteState">取消</view>

			<view class="title smTitle">参加工作时间</view>

			<view class="confirm md4Text mblue" @click="chooseState">确定</view>
		</view>

		<picker-view class="stateList"  :value="value" @change="bindChange">
			<picker-view-column class="star picker-view" >
				<view class="item" v-for="item in year">
					{{item}}
				</view>
				
			</picker-view-column>
			
			<picker-view-column class="end picker-view" >
				<view class="item" v-for="item in month">
					{{item}}
				</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
export default {
	data() {
	
		return {
		
			visible: true,
			stateList: [{ state: '离职-随时到岗1' }, { state: '离职-随时到岗2' }, { state: '离职-随时到岗3' }, { state: '离职-随时到岗4' }, { state: '离职-随时到岗5' }],
			ins: 2,
			year: [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021],
			month:[1,2,3,4,5,6,7,8,9,10,11,12],
			value:[2012,2]
			
		}
	},

	methods: {
		getState(index) {
			this.ins = index;
		},
		deleteState() {
			this.$emit('checkedTime');
		},
		chooseState() {
			this.$emit('checkedTime');
			this.$emit('changeValue',this.value);
		},
		 bindChange: function (e) {
		                const val = e.detail.value
		                console.log('选择的薪资',val);
						this.value[0] = this.year[val[0]];
						this.value[1] = this.month[val[1]];
		            }
	}
};
</script>

<style scoped lang="less">
.state {
	width: 100vw;
	height: 570upx;
	position: fixed;
	z-index: 1001;
	left: 0;
	bottom: 0;
	background-color: #ffffff;
	padding: 0 36upx;

	.state_head {
		width: 100%;
		height: 120upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.stateList {
		width: 100%;
		height: calc(100% - 120upx);
		overflow-y: auto;
		padding-top: 43upx;

		.picker-view {
			width: 100%;

			.item {
				width: 100%;
				
				text-align: center;
			}
		}
	}
}
</style>